import { GetStaticPaths, GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { ParsedUrlQuery } from 'querystring'; import { useIntl } from 'react-intl'; import { getLayout, LinksListWidget, PageLayout, PostsList, } from '../../../components'; import { getArticles, getArticlesEndCursor, getThematicsPreview, getTopicsPreview, getTotalArticles, getTotalThematics, getTotalTopics, } from '../../../services/graphql'; import { type EdgesResponse, type NextPageWithLayout, type RawArticle, type RawThematicPreview, type RawTopicPreview, } from '../../../types'; import { settings } from '../../../utils/config'; import { getBlogSchema, getLinksListItems, getPageLinkFromRawData, getPostsList, getSchemaJson, getWebPageSchema, } from '../../../utils/helpers'; import { loadTranslation, type Messages } from '../../../utils/helpers/server'; import { useBreadcrumb, useRedirection, useSettings, } from '../../../utils/hooks'; type BlogPageProps = { articles: EdgesResponse; pageNumber: number; thematicsList: RawThematicPreview[]; topicsList: RawTopicPreview[]; totalArticles: number; translation: Messages; }; /** * Blog index page. */ const BlogPage: NextPageWithLayout = ({ articles, pageNumber, thematicsList, topicsList, totalArticles, }) => { useRedirection({ query: { param: 'number', value: '1' }, redirectTo: '/blog', }); const intl = useIntl(); const title = intl.formatMessage({ defaultMessage: 'Blog', description: 'BlogPage: page title', id: '7TbbIk', }); const pageNumberTitle = intl.formatMessage( { defaultMessage: 'Page {number}', id: 'zbzlb1', description: 'BlogPage: page number', }, { number: pageNumber, } ); const pageTitleWithPageNumber = `${title} - ${pageNumberTitle}`; const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title: pageNumberTitle, url: `/blog/page/${pageNumber}`, }); const { website } = useSettings(); const { asPath } = useRouter(); const pageTitle = `${pageTitleWithPageNumber} - ${website.name}`; const pageDescription = intl.formatMessage( { defaultMessage: "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.", description: 'BlogPage: SEO - Meta description', id: '18h/t0', }, { websiteName: website.name } ); const webpageSchema = getWebPageSchema({ description: pageDescription, locale: website.locales.default, slug: asPath, title, }); const blogSchema = getBlogSchema({ isSinglePage: false, locale: website.locales.default, slug: asPath, }); const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]); const thematicsListTitle = intl.formatMessage({ defaultMessage: 'Thematics', description: 'BlogPage: thematics list widget title', id: 'HriY57', }); const topicsListTitle = intl.formatMessage({ defaultMessage: 'Topics', description: 'BlogPage: topics list widget title', id: '2D9tB5', }); return ( <> {pageTitle}